<template>
  <view class="list">
    <view
      class="item"
      v-for="(item, index) in dataList"
      :key="index"
      @click="itemClick(item, index)"
    >
      <!-- 资产列表 -->
      <view class="asset-list">
        <view class="asset-card">
          <!-- 左侧信息 -->
          <view class="asset-right-container">
            <up-image
              :src="getImage(item.image)"
              width="160rpx"
              height="160rpx"
              class="asset-img"
            />
            <view class="status">
              <up-tag :text="item.asset_state_name" size="mini" />
            </view>
          </view>
          <!-- 右侧信息 -->
          <view class="asset-info">
            <view class="title">{{ item.asset_name }}</view>
            <view style="display: flex">
              <view class="text" style="flex: 1"
                >使用部门：{{ item.department_name }}</view
              >
              <view class="text" style="flex: 1"
                >使用人：{{ item.user_name }}</view
              >
            </view>
            <view class="text">标签编码：{{ item.label_number }}</view>
            <view class="text">资产编码：{{ item.asset_code }}</view>
            <view class="text">存放地点：{{ item.location_name }}</view>
            <view class="btns">
              <!-- <up-button size="mini" text="生命周期" type="primary" plain />
                <up-button size="mini" text="资产变更" type="primary" plain /> -->
              <view @click.stop style="width: 100%;">
                <up-button
                  @click="handleBtn(item)"
                  size="normal"
                  text="资产管理"
                  type="primary"
                  plain
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

   <!-- 底部弹出 -->
   <up-popup
     :show="popupShow"
     mode="bottom"
     border-radius="30"
     @close="closePop"
     closeable
     :customStyle="{
       'margin-bottom': '120rpx',
     }"
   >
     <view class="popup-content">
       <!-- 标题部分 -->
       <view class="popup-header">
         <view class="status-tag">{{ items.asset_state_name }}</view>
         <view class="asset-code">{{ items.asset_name }}</view>
       </view>
       <view class="asset-label">
         资产标签：{{ items.asset_class_name }}({{ items.tag_type_name }})
       </view>
   
       <!-- 操作按钮网格 -->
       <up-grid :border="false" col="2" gap="40rpx">
         <up-grid-item v-for="(item, index) in actionList" :key="index">
           <up-button
             :plain="true"
             :text="item"
             size="large"
             @click="handleAction(item)"
             :customStyle="{
               height: '100rpx',
               fontSize: '36rpx',
               borderRadius: '20rpx'
             }"
           />
         </up-grid-item>
       </up-grid>
     </view>
   </up-popup>
  </view>
</template>

<script setup>
import { defineProps, ref } from "vue";
import { BASE_URL } from "@/api/request";

defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});

const popupShow = ref(false);
const actionList = [
  "资产编辑",
  "资产详情",
  // "资产删除",
  // "资产处置",
  // "资产领用",
  // "资产退库",
  // "资产转移",
  // "资产变更",
  // "资产报废",
  // "资产报修",
];

const items = ref({});

const itemClick = (item) => {
  uni.navigateTo({
    url: "/pages/assetsPages/info?name=detail",
  });
  uni.setStorageSync("assetInfoData", item);
};

const getImage = (image) => {
  const type = getItemType(image);
  if (image) {
    if (type === "ID") {
      return `${BASE_URL}/File/GetImage?fileId=${image}`;
    } else {
      return image;
    }
  }
  return "";
};

const handleBtn = (item) => {
  console.log(item);
  popupShow.value = !popupShow.value;
  items.value = item;
};

const closePop = () => {
  popupShow.value = !popupShow.value;
};

const handleAction = (item) => {
  popupShow.value = !popupShow.value;
  if (item === "资产编辑") {
    uni.navigateTo({
      url: "/pages/assetsPages/info?name=edit",
    });
  }
  if (item === "资产详情") {
    uni.navigateTo({
      url: "/pages/assetsPages/info?name=detail",
    });
  }
  uni.setStorageSync("assetInfoData", items.value);
};

const getItemType = (item) => {
  const idPattern = /^[a-zA-Z0-9-]+$/; // 包含字母、数字和 - 符号
  const apiPattern = /^\/File\//; // 假设接口地址以 '/File/' 开头
  const pathPattern = /^\/(?!File)/; // 普通路径以 '/' 开头，但不以 '/File/' 开头
  const relativePathPattern = /^[^/]/; // 假设相对路径不以 '/' 开头

  if (idPattern.test(item)) {
    return "ID";
  } else if (apiPattern.test(item)) {
    return "接口"; // 识别接口地址
  } else if (pathPattern.test(item)) {
    return "路径"; // 识别普通路径
  } else if (relativePathPattern.test(item)) {
    return "相对路径"; // 识别相对路径
  } else {
    return "其他";
  }
};
</script>

<style lang="scss" scoped>
.asset-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin: 20rpx;

  .asset-card {
    display: flex;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 20rpx;

    .asset-right-container {
      position: relative;
      .asset-img {
        margin-right: 20rpx;
      }
      .status {
        position: absolute;
        right: 20rpx;
        top: 0;
      }
    }

    .asset-info {
      flex: 1;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .text {
        font-size: 24rpx;
        color: #333;
        margin-bottom: 6rpx;
      }

      .btns {
        display: flex;
        gap: 10rpx;
        margin-top: 12rpx;

        up-button {
          flex: 1;
        }
      }
    }
  }
}
.popup-content {
  padding: 50rpx;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
}

.popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.status-tag {
  background-color: rgb(71, 146, 253);
  color: white;
  padding: 15rpx 25rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  margin-right: 30rpx;
  font-weight: bold;
}

.asset-code {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.asset-label {
  color: #666;
  font-size: 34rpx;
  margin-bottom: 40rpx;
  line-height: 1.6;
  padding: 10rpx 0;
}
</style>
